<script lang="ts" setup>
import { reactive, onActivated, ref, defineAsyncComponent } from 'vue'
import UserInfoForm from '@/components/form/UserInfoForm.vue'
import BatteryTermTable from '@/components/table/BatteryTermTable.vue'
import { useRoute } from 'vue-router'
import { useActivated } from '@/hooks/useActivated'
import {
  queryUserInfoDetailOrderTableCol,
  BatteryPackageDetailOrderTableCol,
  queryUserInfoDetailOrderRequestData
} from '@/api/user/types/user'
import { queryUserInfoDetailOrder } from '@/api/user'
import { useTable } from '@/hooks/useTable'
import { getToken } from '@/utils/cache/cookies'
defineOptions({
  name: 'BatteryTermOrder'
})
const AdjustTermDialog = defineAsyncComponent(() => import('@/components/dialog/AdjustTerm.vue'))
const route = useRoute()
const form = reactive<queryUserInfoDetailOrderRequestData>({
  phone: '',
  orderId: '',
  type: '',
  selectType: 'batterypackage'
})
const { pagination, data, loading, handleSizeChange, handleCurrentChange, setCurrentPage, load } =
  useTable<queryUserInfoDetailOrderTableCol>(queryUserInfoDetailOrder, getToken() ?? '', () => form)
const handleFormSearch = () => {
  setCurrentPage(1)
  load()
}

/** 处理是否缓存 */
onActivated(() => {
  form.phone = (route.query.phone as string) || ''
  form.orderId = (route.query.orderId as string) || ''
  form.selectType = (route.query.selectType as string) || ''
  form.type = (route.query.type as string) || ''
})
useActivated(
  form,
  { form },
  [
    { key: 'phone', path: 'form.phone' },
    { key: 'selectType', path: 'form.selectType' },
    { key: 'type', path: 'form.type' },
    { key: 'orderId', path: 'form.orderId' }
  ],
  load,
  []
)
const AdjustTermDialogRef = ref<InstanceType<typeof AdjustTermDialog> | null>(null)
const handleOpenAdjustTerm = (data: BatteryPackageDetailOrderTableCol) => {
  AdjustTermDialogRef.value?.setId(data.orderId)
  AdjustTermDialogRef.value?.open()
}
</script>

<template>
  <div class="xy-container">
    <user-info-form v-model="form" type="batteryterm" @search="handleFormSearch" />
    <battery-term-table
      :loading="loading"
      @open="handleOpenAdjustTerm"
      :data="data as BatteryPackageDetailOrderTableCol[]"
      page="userinfo"
    />
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
  </div>
</template>

<style scoped></style>
